<script setup lang="ts">
import BlockBox from '../BlockBox.vue';
import Collapse from '../../packages/components/collapse/src/index.vue';
import { ref } from 'vue';
const showRef = ref(false)
</script>

<template>
    <BlockBox text="下拉过渡">
        <div style="width: 200px;height: 200px;">
            <es-button status="info" @click="showRef = !showRef">{{ showRef ? '关闭' : '展开' }}</es-button>
            <Collapse>
                <div v-show="showRef" style="margin: 20px 0px;">
                    <div style="width: 100px;height: 100px;margin: 10px; border: 1px solid red;">
                    </div>
                </div>
            </Collapse>
        </div>
    </BlockBox>
</template>
